<template>
  <view class="container" v-if="Object.values(obj).length != ''">
    <!-- 学会信息 -->
    <view class="userinfo">
      <image :src="imgUrl + obj.avatar" mode="aspectFill" style="width: 100rpx; height: 100rpx; border-radius: 100rpx 100rpx 100rpx 100rpx"></image>
      <view class="right">
        <view class="name">
          <view style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">{{ obj.username }}</view>
          <image :src="`../../static/icon/${obj.gender == 1 ? 'nv' : 'nan'}.png`" mode="" style="width: 42rpx; height: 42rpx"></image>
          <view class="school" v-if="obj.school != ''">{{ obj.school }}</view>
        </view>
        <view class="subject">{{ obj.grade_name + '|' + obj.subject_name }}</view>
      </view>
    </view>

    <!-- 学生地址 -->
    <view class="place">
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; margin-bottom: 16rpx">
        <text>{{ obj.address_name }}</text>
        <text style="padding-left: 30rpx">{{ obj.address_mobile }}</text>
      </view>
      <view style="font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">{{ obj.address_detail }}</view>
    </view>

    <!-- 科目 -->
    <view class="subjectbox">
      <view style="display: flex; justify-content: space-between; align-items: center">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">科目选择</view>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">{{ obj.grade_name + '|' + obj.subject_name }}</view>
      </view>
      <view style="display: flex; justify-content: space-between; align-items: center; margin-top: 30rpx">
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">购买课时</view>
        <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: 500">已购{{ obj.period_num }}课时</view>
      </view>
    </view>
    <!-- 未预约时间 -->
    <view class="yuyuebox" v-if="obj.teacherSetup == ''">
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">暂无预约上课时间</view>
    </view>
    <!-- 已预约时间 -->
    <view class="yuyuebox" v-else>
      <view style="font-size: 28rpx; font-family: PingFang SC, PingFang SC; font-weight: bold">已预约上课时间</view>
      <view style="font-size: 26rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; margin-top: 16rpx">{{ obj.name_week }}</view>
      <!-- 周几 -->
      <view style="display: flex; align-items: center; margin-top: 30rpx; margin-bottom: 26rpx">
        <view :class="{ common: true, act: actindex == index }" v-for="(item, index) in obj.teacherSetup" :key="item.id" @click="actindex = index">{{ item.name }}</view>
      </view>
      <!-- 时间段 -->
      <view style="display: flex">
        <view class="yuyueitem" v-for="item2 in obj.teacherSetup[actindex].list" :key="item2.id">
          <view>
            {{
              item2.status == 1
                ? '可预约'
                : item2.status == 2 && item2.user_cancel == 2
                ? '已预约'
                : item2.status == 2 && item2.user_cancel == 0
                ? '已预约'
                : item2.status == 2 && item2.user_cancel == 3
                ? ' 已取消预约'
                : '可预约'
            }}
          </view>
          <view>{{ item2.time_slot }}</view>
        </view>
      </view>
      <!-- 剩余课时 -->
      <view style="font-size: 24rpx; font-family: PingFang SC, PingFang SC; font-weight: 500; color: #333333; margin-top: 20rpx">
        剩余可预约课时 {{ obj.can + '/' + obj.period_num }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      actindex: 0,
      imgUrl: '',
      week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      obj: {}
    };
  },
  methods: {
    async getdetail(id) {
      const res = await uni.$http.post('/teacher_order/details', {
        order_id: id
      });
      console.log('获取订单的详情', res.data.data);
      this.obj = res.data.data;
    }
  },
  onLoad(e) {
    this.imgUrl = this.imgurl;
    if (e.id) {
      console.log(e.id);
      this.getdetail(e.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  .userinfo {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 20rpx;
    width: 710rpx;
    height: 164rpx;
    padding: 30rpx;
    background: #f1f3ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    .right {
      margin-left: 20rpx;
      .name {
        display: flex;
        align-items: center;
        margin-bottom: 14rpx;
        .school {
          font-size: 22rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          width: 172rpx;
          height: 40rpx;
          background: #eaedfd;
          border-radius: 10rpx 10rpx 10rpx 10rpx;
          color: #3553e8;
          text-align: center;
          line-height: 40rpx;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
      .subject {
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
      }
    }
  }
  .place {
    box-sizing: border-box;
    width: 710rpx;
    height: 160rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 0 20rpx 20rpx 20rpx;
    padding: 30rpx;
    border: 2rpx solid #f1f1f1;
  }
  .subjectbox {
    box-sizing: border-box;
    width: 710rpx;
    height: 180rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 20rpx;
    padding: 30rpx;
    border: 2rpx solid #f1f1f1;
  }
  .yuyuebox {
    box-sizing: border-box;
    width: 710rpx;
    height: 434rpx;
    margin: 20rpx;
    padding: 30rpx;
    background: #f9f9f9;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #f1f1f1;
    .common {
      width: 102rpx;
      height: 62rpx;
      font-size: 28rpx;
      text-align: center;
      line-height: 62rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .act {
      background: #ecefff;
      color: #3553e8;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
    }
    .yuyueitem {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 160rpx;
      height: 110rpx;
      background: #ffffff;
      margin-right: 4rpx;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #333333;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 2rpx solid #f1f1f1;
    }
  }
}
</style>
